<template>
  <div>
    <RePage>
      <MyFormCreate :clear-event="getTableList" v-model="searchFrom" :rule="searchFormRules" :key="key">
        <el-button type="primary" @click="DebounceGetTableList">搜索</el-button>
        <sj-button custom-type="sinfo" @click="DebounceResetting">重置</sj-button>
      </MyFormCreate>
      <div>
        <el-button v-auth="'business.flowcards.export'" type="primary"  @click="importAll">导出全部</el-button>
        <!-- <el-button
          type="danger"
          :icon="Delete"
          :disabled="!selectionData.length"
          @click="deletes()"
          >批量删除</el-button
        > -->
      </div>
      <pure-table class="mt-5" :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)" showOverflowTooltip border
        @selection-change="selectionChange" :isShowPag="false">
        <template #deviceId="{ row }">
          {{ isNullOrEmpty( row.gatewayUnityName ?'-': row.deviceId ) }}
        </template>
        <template #productName="{ row }">
          {{ isNullOrEmpty( row.gatewayUnityName ?'-': row.productName ) }}
        </template>
        <template #deviceUnityName="{ row }">
          <span v-if="row.deviceUnityName">{{ isNullOrEmpty( row.deviceUnityName ) }}</span>
          <span v-else>{{ isNullOrEmpty( row.gatewayUnityName ) }}</span>
        </template>
        <template #deviceProjectName="{ row }">
          <span v-if="row.deviceProjectName">{{ isNullOrEmpty( row.deviceProjectName ) }}</span>
          <span v-else>{{ isNullOrEmpty( row.gatewayProjectName ) }}</span>
        </template>
        <template #status="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'info'">
            {{ isNullOrEmpty( row.status === 1 ? "使用中" : "未使用" ) }}
          </el-tag>
        </template>
      </pure-table>
      <div class="mt-5">
        <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
          :layout="PAGE_LAYOUT" :total="tableData.total" @size-change="getTableList" @current-change="getTableList" />
      </div>
    </RePage>
  </div>
</template>
<script lang="ts" setup>
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import MyFormCreate from "@/components/MyFormCreate/index.vue";
import RePage from "@/components/RePage/index.vue";
import ReTable from "@/components/ReTable/index.vue";
import editForm from "./form.vue";
import infos from "./info.vue";
import {
  USESTATUS,
  USESTATUSTEXT,
  OPERATOR
} from "@/constant/alarm-mangenment";
import { reactive, ref, h } from "vue";
import { PAGE_LAYOUT } from "@/constant";
import { Plus, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getList,
  getInfo,
  addInfo,
  editInfo,
  deleteInfo,
  importAllflowcard
} from "@/api/operate/device-management/traffic-card/index";
import { titles, defaultSearchForm, prompt, defaultInfoForm } from "./index";
import { addDialog } from "@/components/ReDialog";
import {
  cloneDeep,
  isAllEmpty,
  deviceDetection,
  debounce
} from "@pureadmin/utils";
import { message } from "@/utils/message";
import { customDebounce, customPromiseDebounce } from "@/utils/functions";

const route = useRoute()  // 获取路由参数
const searchFrom = ref(defaultSearchForm());
const key = ref(0);
const showInfo = ref();
const formRef = ref();
const tableData = reactive({
  data: [],
  total: 0
});

const searchFormRules = [
  {
    type: "input",
    field: "deviceId",
    title: titles.deviceId,
    value: null,
    props: {
      placeholder: prompt.deviceId,
      clearable: true
    }
  },
  {
    type: "input",
    field: "flowCardNum",
    title: titles.flowCardNum,
    value: null,
    props: {
      placeholder: prompt.flowCardNum,
      clearable: true
    }
  },
  {
    type: "input",
    field: "lastFlow",
    title: titles.lastFlow + "小于",
    value: null,
    props: {
      placeholder: prompt.lastFlow,
      clearable: true
    }
  },
  {
    type: 'select', field: 'isWillExpired', title: titles.isWillExpired, value: null, 
    options: [
      { label: '即将到期', value: 1 },
    ],
    props: {
      placeholder: prompt.isWillExpired, clearable: true
    }
  },
  {
    type: "input",
    field: "ICCID",
    title: titles.ICCID,
    value: null,
    props: {
      placeholder: prompt.ICCID,
      clearable: true
    }
  },
  // {
  //   type: "select",
  //   field: "status",
  //   title: titles.status,
  //   options: USESTATUS,
  //   value: null,
  //   props: {
  //     placeholder: prompt.status,
  //     clearable: true
  //   }
  // },
  {
    type: "select",
    field: "operator",
    title: titles.operator,
    value: null,
    options: OPERATOR,
    props: {
      placeholder: prompt.operator,
      clearable: true
    }
  },
  { type: "number", field: "page", title: "page", hidden: true },
  { type: "number", field: "limit", title: "limit", hidden: true }
];
const selectionData = ref([]);
const roleTableConfig = [
  { type: "selection", align: "left", fixed: 'left' },
  { prop: "id", label: titles.id, width: 100, fixed: 'left' },
  { slot: "deviceUnityName", label: titles.unityName, minWidth: 140 },
  { slot: "deviceProjectName", label: titles.projectName, minWidth: 140 },
  // { prop: "modelName", label: titles.modelName },
  { slot: "productName", label: "产品类型", minWidth: 100 },
  { slot: "deviceId", label: titles.deviceId, minWidth: 100 },
  { prop: "flowCardNum", label: titles.flowCardNum, minWidth: 150 },
  { prop: "ICCID", label: titles.ICCID, minWidth: 160 },
  { slot: "status", label: titles.status, minWidth: 90 },
  { prop: "operator", label: titles.operator, minWidth: 100 },
  { prop: "lastFlow", label: titles.lastFlow, minWidth: 100 },
  { prop: "activeDate", label: titles.activeDate, minWidth: 100 }
  // { slot: "action", label: titles.action, width: 150, fixed: "right" }
];
onMounted(() => {
  if (route.query.isWillExpired) {
    searchFrom.value.isWillExpired =Number(route.query.isWillExpired)
    key.value++
  }
  getTableList();
});

//导出全部
const importAll = ()=>{
  importAllflowcard(searchFrom.value).then(res=>{
    let fileName = "流量卡.xlsx"
    if(res.type === "text/csv") {
      fileName = "流量卡.csv"
    }
    const url = window.URL.createObjectURL(res)
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    link.click()
    link.remove()
  })
}
// 获取列表数据
const getTableList = () => {
  getList(searchFrom.value).then(res => {
    if (res.code === 200) {
      tableData.data = res.result.data;
      tableData.total = res.result.total;
    }
  });
};
// 重置搜索栏
const resetting = () => {
  //点击重置按键
  Object.assign(searchFrom.value, defaultSearchForm());
  key.value++;
  getTableList();
};
// 新增
const isceshi = ref(false);
const add = row => {
  isceshi.value = true;
};
// 编辑
const edit = row => {
  showInfo.value = {};
  // openDialog("编辑", row);
};
// 删除
const deletes = (row?) => {
  ElMessageBox.confirm(`确认删除${row ? "当前" : "选中的"}数据?`, "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteInfo({
      ids: row ? [row.id] : selectionData.value.map(item => item.id)
    }).then(res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
        getTableList();
      }
    });
  });
};
const selectionChange = data => {
  selectionData.value = data;
};
// 获取列表
const DebounceGetTableList = debounce(getTableList, 1000, true);
// 重置
const DebounceResetting = debounce(resetting, 1000, true);
// 添加请求
const DebounceAddInfo = customPromiseDebounce(addInfo, 1000, true);
// 编辑请求
const DebounceEditInfo = customPromiseDebounce(editInfo, 1000, true);
</script>
<style lang="scss" scoped></style>
